<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	padding: 100px;
	-webkit-perspective: 300px;
	perspective: 300px;
}
#div {
	width: 100px;
	height: 100px;
	background: red;
	transition: .5s;
}
</style>
<script type="text/javascript" src="js/m.Tween.js"></script>
<script type="text/javascript">
window.onload = function(){
	var div = document.querySelector('#div');
	window.addEventListener('deviceorientation', function(e) {
			var x = e.beta;
			var y = e.gamma;
			var z = e.alpha;
			css(div,"rotateX",x);
			css(div,"rotateY",y);
			css(div,"rotateZ",z);
	});
};
</script>
</head>
<body>
<div id="box">
	<div id="div"></div>
</div>
</body>
</html>